<template>
  <app-list>
    <template #search>
      <Search />
    </template>
    <template #action>
      <!-- <el-button type="primary" icon="plus" @click="handleadd()">新增</el-button> -->
    </template>
    <el-table
      class="order_table"
      @row-click="clickOrdertableRow"
      @expand-change="clickOrdertableRow"
      stripe
      :data="list"
      :row-class-name="ordertableRowClass"
      :row-key="getRowKeys"
      :expand-row-keys="orderExpands"
      v-loading="pageData.loading"
    >
      <el-table-column type="expand">
        <template #default="scope">
          <div class="expand_table">
            <el-table class="order_table2" :data="list2">
              <el-table-column
                label="下单时间"
                prop="time"
                :width="flexColumnWidth2('下单时间', 'time', 'string', 20)"
              />
              <el-table-column
                label="下单金额"
                prop="jiner"
                align="right"
                :width="flexColumnWidth2('下单金额', 'jiner', 'string', 20)"
              >
                <template #default="scope">
                  <div style="font-weight: bold">{{ scope.row.jiner }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="下单(实数)"
                prop="shishu"
                align="right"
                :width="flexColumnWidth2('下单(实数)', 'shishu', 'string', 20)"
              >
              <template #default="scope">
                  <div style="font-weight: bold">{{ scope.row.shishu }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="实数总金额"
                prop="zonjiner"
                align="right"
                :width="flexColumnWidth2('实数总金额', 'zonjiner', 'string', 20)"
              >
              <template #default="scope">
                  <div style="font-weight: bold">{{ scope.row.zonjiner }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="盈亏(虚数)"
                prop="ykxushu"
                align="right"
                :width="flexColumnWidth2('盈亏(虚数)', 'ykxushu', 'string', 20)"
              />
              <el-table-column
                label="盈亏(实数)"
                prop="ykshishu"
                align="right"
                :width="flexColumnWidth2('盈亏(实数)', 'ykshishu', 'string', 20)"
              />
              <el-table-column
                label="盈亏状态"
                prop="ykzt"
                :width="flexColumnWidth2('盈亏状态', 'ykzt', 'string', 20)"
              />
              <el-table-column
                label="利润率"
                prop="lrl"
                :width="flexColumnWidth2('利润率', 'lrl', 'string', 20)"
              />
              <el-table-column
                label="返水(实数)"
                prop="fsshishu"
                align="right"
                :width="flexColumnWidth2('返水(实数)', 'fsshishu', 'string', 20)"
              >
              <template #default="scope">
                  <div style="font-weight: bold">{{ scope.row.fsshishu }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="交收状态"
                prop="jszt"
                :width="flexColumnWidth2('交收状态', 'jszt', 'string', 20)"
              />
              <el-table-column
                label="平台订单号"
                prop="ptdd"
                :width="flexColumnWidth2('平台订单号', 'ptdd', 'string', 40)"
              />
              <el-table-column label="操作">
                <template #default="scope">
                  <div style="color: #47acff">标记</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="任务名称"
        :width="flexColumnWidth('任务名称', 'name', 'string', 30)"
        prop="name"
      />
      <el-table-column
        label="开赛时间"
        :width="flexColumnWidth('开赛时间', 'time', 'string', 30)"
        prop="time"
      />
      <el-table-column
        label="联赛"
        :width="flexColumnWidth('联赛', 'liansai', 'string', 30)"
        prop="liansai"
        show-overflow-tooltip
      />
      <el-table-column label="赛事" :width="flexColumnWidth('赛事', 'saishi1', 'string', 40)">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <div style="display: flex; flex-direction: column; margin-left: 20px">
              <div style="white-space: nowrap">{{ scope.row.saishi1 }}</div>
              <div style="margin-left: -20px; height: 0">
                <img style="width: 16px; height: 16px; margin-top: -20px" src="@/assets/home/vs.png" />
              </div>
              <div style="white-space: nowrap">{{ scope.row.saishi2 }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="平台" :width="flexColumnWidth('平台', 'pintai', 'array', 30)">
        <template #default="scope">
          <div style="display: flex; flex-direction: column">
            <div
              v-for="(item, index) in scope.row.pintai"
              :key="index"
              :style="index + 1 != scope.row.pintai.length ? 'margin-bottom: 4px;' : ''"
            >
              {{ item }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="盘口" :width="flexColumnWidth('盘口', 'panko', 'array', 30)">
        <template #default="scope">
          <div style="display: flex; flex-direction: column">
            <div
              v-for="(item, index) in scope.row.panko"
              :key="index"
              :style="index + 1 != scope.row.panko.length ? 'margin-bottom: 4px;' : ''"
            >
              {{ item }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单金额" :width="flexColumnWidth('下单金额', 'xiadanjine', 'array', 30)">
        <template #default="scope">
          <div style="display: flex; flex-direction: column">
            <div
              v-for="(item, index) in scope.row.xiadanjine"
              :key="index"
              :style="
                index + 1 != scope.row.xiadanjine.length
                  ? 'margin-bottom: 4px;font-weight: bold;'
                  : 'font-weight: bold;'
              "
            >
              {{ item }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="结算状态" :width="flexColumnWidth('结算状态', 'jiesuan', 'array', 30)">
        <template #default="scope">
          <div style="display: flex; flex-direction: column">
            <div
              v-for="(item, index) in scope.row.jiesuan"
              :key="index"
              :style="index + 1 != scope.row.jiesuan.length ? 'margin-bottom: 4px;' : ''"
            >
              {{ item == '' ? '-' : item }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单账号" :width="flexColumnWidth('下单账号', 'zhanghao', 'array', 40)">
        <template #default="scope">
          <div style="display: flex; flex-direction: column">
            <div
              v-for="(item, index) in scope.row.zhanghao"
              :key="index"
              :style="index + 1 != scope.row.zhanghao.length ? 'margin-bottom: 4px;' : ''"
            >
              {{ item }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <template #footerRight>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        v-model:current-page="pageData.page"
        v-model:page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        background
      />
    </template>

    <!-- <AddItem v-model="dialog.edit.show" :data="dialog.edit.data" :parentdata="parentdata" @change="changeform()" /> -->
  </app-list>
</template>

<script setup>
import { http } from '@/utils/http'
import Search from '../Search.vue'

const list = ref([
  {
    id: 1,
    name: '赛前打水-全部',
    time: '2024/5/15 14:00:00',
    liansai: '美国职业大联盟',
    saishi1: '西雅图海湾人',
    saishi2: '皇家盐湖城',
    pintai: [' BET365会员', '皇冠会员', '平博会员'],
    panko: ['全场：主胜@2.85', '全场：平局@3', '全场：客胜@3.33'],
    xiadanjine: ['8000', '10000', '5000'],
    jiesuan: ['', '未结算', '已结算'],
    zhanghao: ['BTAA55F00J', 'F5mi4', 'BETff006'],
  },
  {
    id: 2,
    name: '赛前打水-全部',
    time: '2024/5/15 14:00:00',
    liansai: '美国职业大联盟',
    saishi1: '西雅图海湾人',
    saishi2: '皇家盐湖城',
    pintai: [' BET365会员'],
    panko: ['全场：主胜@2.85'],
    xiadanjine: ['8000'],
    jiesuan: ['已结算'],
    zhanghao: ['BTAA55F00J'],
  },
])

const list2 = ref([
  {
    time: '2024/5/15 12:20',
    jiner: '4500',
    shishu: '4500',
    zonjiner: '18000',
    ykxushu: '+4500',
    ykshishu: '+4600',
    ykzt: '赢',
    lrl: '50.85%',
    fsshishu: '0',
    jszt: '已交收',
    ptdd: 'SQDS25685595221',
  },
  {
    time: '2024/5/15 12:20',
    jiner: '4500',
    shishu: '4500',
    zonjiner: '18000',
    ykxushu: '+4500',
    ykshishu: '+4600',
    ykzt: '赢',
    lrl: '50.85%',
    fsshishu: '0',
    jszt: '已交收',
    ptdd: 'SQDS25685595221',
  },
])

const orderExpands = ref([])
const { pageData, pageActions, dialog } = usePage(
  () => {
    const query = {
      page: pageData.page,
      page_size: pageData.pageSize,
      ...pageData.query,
    }

    return http.get('/agent/list_relation', {
      params: query,
    })
  },
  {
    query: {},
  }
)

const getRowKeys = row => {
  return row.id
}

const clickOrdertableRow = row => {
  orderExpands.value = []
  if (orderExpands.value.includes(row.id)) {
    orderExpands.value = orderExpands.value.filter(val => val !== row.id)
  } else {
    orderExpands.value.push(row.id)
  }
}

const ordertableRowClass = data => {
  if (data.row.id == orderExpands.value[0]) {
    return 'expand_order_table_row'
  }
}

const flexColumnWidth = (label, prop, type, widthnum) => {
  let arr = []
  if (type == 'string') {
    let arr1 = list.value.map(x => x[prop])
    let arr2 = []
    if (prop == 'saishi1') {
      arr2 = list.value.map(x => x['saishi2'])
    }
    arr = arr1.concat(arr2)
  } else if (type == 'array') {
    let arr1 = list.value.map(x => x[prop])
    arr = arr1.flat()
  }

  arr.push(label) // 把每列的表头也加进去算
  let width = getMaxLength(arr) + widthnum + 'px'
  return width
}
const flexColumnWidth2 = (label, prop, type, widthnum) => {
  let arr = []
  if (type == 'string') {
    let arr1 = list2.value.map(x => x[prop])
    let arr2 = []
    if (prop == 'saishi1') {
      arr2 = list2.value.map(x => x['saishi2'])
    }
    arr = arr1.concat(arr2)
  } else if (type == 'array') {
    let arr1 = list2.value.map(x => x[prop])
    arr = arr1.flat()
  }

  arr.push(label) // 把每列的表头也加进去算
  let width = getMaxLength(arr) + widthnum + 'px'
  return width
}

const getMaxLength = arr => {
  return arr.reduce((acc, item) => {
    if (item) {
      const calcLen = getTextWidth(item)
      if (acc < calcLen) {
        acc = calcLen
      }
    }
    return acc
  }, 0)
}
const getTextWidth = str => {
  let width = 0
  const html = document.createElement('span')
  html.innerText = str
  html.className = 'getTextWidth'
  document.querySelector('body').appendChild(html)
  width = document.querySelector('.getTextWidth').offsetWidth
  document.querySelector('.getTextWidth').remove()
  return width
}
</script>

<style lang="scss" scoped>
.expand_table {
  padding: 0 8px 8px 8px;
  background-color: rgba(71, 172, 255, 0.1);
}
</style>

<style>
.order_table .el-table__expand-icon .el-icon {
  display: none !important;
}

.order_table .el-table__expand-icon {
  content: url('@/assets/order/zhankai.png') !important;
  transform: rotate(0deg) !important;
}
.order_table .el-table__expand-icon--expanded {
  content: url('@/assets/order/shouqi.png') !important;
  transform: rotate(0deg) !important;
}
.order_table tbody tr:hover {
  background-color: none !important;
}
.order_table .el-table__row--striped {
  background-color: #fafafa;
}
.order_table .el-table__expanded-cell {
  padding: 0;
  border-radius: 0 0 8px 8px !important;
}
.order_table .el-table__expanded-cell:hover,
.order_table .el-table__expanded-cell {
  background-color: rgba(71, 172, 255, 0.1) !important;
}

.order_table2 .cell {
  padding: 0 6px;
}
.order_table2 thead tr th {
  background: none !important;
  border: none !important;
}
.order_table2 .el-table__body tr:hover .el-table__cell,
.order_table2 .el-table__inner-wrapper tr:hover {
  background: none !important;
}
.order_table2 thead tr th .cell {
  color: #778090 !important;
}
.order_table2 tbody tr td {
  padding: 6px 0 !important;
}
.expand_order_table_row,
.expand_order_table_row td {
  background-color: rgba(71, 172, 255, 0.1) !important;
}
.expand_order_table_row .el-table__cell:first-child {
  border-radius: 8px 0 0 0 !important;
}
.expand_order_table_row .el-table__cell:last-child {
  border-radius: 0 8px 0 0 !important;
}
</style>